<template>
  <div>
    <!-- 商品详情页面 -->

    <el-menu
        class="el-menu-demo"
        mode="horizontal"

        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        style="display:flex;justify-content:center">
      <!-- <el-menu-item index="1">联系客服</el-menu-item> -->
      <el-menu-item style=""><img src="../img/logo.png" @click="gotoIndex()"></el-menu-item>
      <el-menu-item @click="gotoIndex()">首页</el-menu-item>
      <el-menu-item index="4" @click="car"><i class="el-icon-shopping-cart-2"></i>购物车</el-menu-item>
      <el-menu-item index="5" @click="pay">充值中心</el-menu-item>
      <el-menu-item index="6" @click="order">我的订单</el-menu-item>
      <el-menu-item index="7" @click="address">收货地址</el-menu-item>
      <el-menu-item index="8" @click="dposistdetil">个人充值查询</el-menu-item>
      <el-menu-item index="9" @click="myShop">我的</el-menu-item>
    </el-menu>

    <!-- 图片走马灯 商品图片集合-->
    <div style="width:100%;display:flex;justify-content:center">
      <div style="width:1100px;height:100%;">
        <div style="display:flex">
          <el-carousel trigger="click">
            <el-carousel-item v-for="(item,index) in photoList" :key="index+item.productId" style="width:516px">
              <el-image
                  style="width: 516px; height: 300px"
                  :src="item.productPhoto"
                  :fit="fit"></el-image>
            </el-carousel-item>
          </el-carousel>
          <div style="margin:110px 0 0 50px">
            <el-form prop="goodsDetail">
              <el-form-item>商品名称：{{ goodsDetail.productName }}</el-form-item>
              <el-form-item>商品描述：{{ goodsDetail.productShortDescription }}</el-form-item>
              <el-form-item>价格：{{ goodsDetail.productPrice / 100 }}</el-form-item>
              <span>购买数量：</span>
              <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="购买数量"></el-input-number>

              <div style="display:flex;margin-top:50px">
                <el-button type="primary" class="button"
                           style="width:80px;height:40px;margin-left:15px;padding: 0px 0px;"
                           @click="gotoOrder(goodsDetail)">直接购买
                </el-button>
                <el-button type="primary" class="button"
                           style="width:80px;height:40px;margin-left:15px;padding: 0px 0px;"
                           @click="addShopCar(goodsDetail)">加入购物车
                </el-button>
                <el-dialog title="充值选择付款方式" :visible.sync="dialogFormVisible">
                  <el-form>
                    <el-form-item label="请选择您想要直接付款的方式" prop="resource1">
                      <el-radio-group v-model="resource1">
                        <el-radio label="支付宝"></el-radio>


                      </el-radio-group>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                  </div>
                </el-dialog>
              </div>
            </el-form>

          </div>
        </div>
        <el-divider style="width:500px;"></el-divider>
        <div style="display:flex;align-content:center;flex-wrap:wrap;width:100%">
          <el-image
              v-for="(item,index) in photoList"
              :key="index+item.productId"
              style="width: 100%; height: 100%"
              :src="item.productPhoto"
              :fit="fit"></el-image>

        </div>
      </div>

    </div>


  </div>

</template>

<script>
import {mapState, mapMutations} from 'vuex'

export default {
  namespaced: true,
  data() {
    return {
      num: "",
      dialogFormVisible: false,
      resource1: "",
      photoList: [],
      screenWidth: 0,
      goodsDetail: [],
      fit: "",
      userId: "",
      url: "",

    }
  },
  computed: {
    ...mapState(['productId'])
  },
  mounted() {
    //is user
    let jsonUser = sessionStorage.getItem("user")
    console.log(jsonUser)
    if (jsonUser == '' || null == jsonUser) {
      this.$message.warning("请先登录")
      this.$router.push("/")
    } else {
      //json String to  json object
      let jsonObj = JSON.parse(jsonUser)
      this.userName = jsonObj.userName
      this.userId = jsonObj.userId
      console.log(this.userId)
      // 首次加载时,需要调用一次
      this.screenWidth = window.innerWidth;
      this.setSize();
      // 窗口大小发生改变时,调用一次
      window.onresize = () => {
        this.screenWidth = window.innerWidth;
        this.setSize();
      }
    }

    this.show()
  },
  methods: {
    ...mapMutations(['setgoods']),
    handleChange(val) {
      console.log(val)
      this.num = val
    },
    gotoOrder(goodsDetail) {
      let jsonUser = sessionStorage.getItem("userData")
      let data = JSON.parse(jsonUser)
      if (data.userId == 0) {
        console.log("bbb")
        this.$message.warning("请先补全信息")
        this.$router.push("/addUserInfo")
      } else {
        console.log(goodsDetail)
        let pList = []
        let p = {}
        p.checked = false
        p.productAmount = this.num
        p.productPhoto = goodsDetail.photoList[0].productPhoto
        p.productPrice = goodsDetail.productPrice / 100
        p.productId = goodsDetail.productId
        p.productName = goodsDetail.productName
        p.userId = this.userId
        pList.push(p)
        let jsonUser = JSON.stringify(pList)
        sessionStorage.setItem("data", jsonUser)
        this.$router.push('/addOrder')
      }
    },
    gotoIndex() {
      this.$router.push('/ShopIndex')
    },
    setSize: function () {
      // 通过浏览器宽度(图片宽度)计算高度
      this.bannerHeight = 400 / 1920 * this.screenWidth;
    },
    order() {
      this.$router.push('/UserOrder')
    },
    address() {
      this.$router.push('getGoodsAddress')
    },
    pay() {
      this.$router.push('/deposit')
    },
    car() {
      this.$router.push('/ShopCar')
    },
    dposistdetil() {
      this.$router.push('/depositDetail')
    },
    gotoGoodsDetail() {

      this.$router.push('/ShopIndexDetail')
    },
    addShopCar(goodsDetail) {

      console.log(goodsDetail)
      let fd = new FormData()
      fd.append("productId", goodsDetail.productId)
      console.log(goodsDetail.productId)
      fd.append("userId", this.userId)
      console.log(this.userId)
      fd.append("productPhotoId", goodsDetail.photoList[0].productPhotoId)
      console.log(goodsDetail.photoList[0].productPhotoId)
      this.$axios.post("/api/car/addCar", fd)
      this.$router.push('/ShopCar')
    },
    myShop() {
      this.$router.push('/user')
    },
    show() {
      let jsonP = sessionStorage.getItem("productId")
      let productId = JSON.parse(jsonP)
      this.$axios.get("/api/product/showOneProduct/" + productId).then(r => {
        console.log(r.data)
        this.goodsDetail = r.data
        this.photoList = this.goodsDetail.photoList
        this.productPrice = this.goodsDetail.productPrice / 100


      })
    }
  },



}
</script>

<style>
.el-carousel {
  width: 500px;
  height: 360px;
  margin: 120px 0 0 150px;
}

.el-carousel__item:nth-child(2n) {

  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {

  background-color: #d3dce6;
}

</style>